<template>
  <div class="page">
    <el-button @click="addItem">添加</el-button>

    <BaseDialog
      :outerVisible="outerVisible"
      :innerVisible="innerVisible"
      @outerClose="outerClose"
      @outerSure="outerSure"
      @innerClose="innerClose"
      @innerSure="innerSure"
    ></BaseDialog>

    <el-table :data="list" style="width: 100%">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="作者" prop="author"></el-table-column>
      <el-table-column label="发布时间" prop="createTime"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" type="success">编辑</el-button>
          <el-button size="small" type="warning" @click="removeItem(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>
<script>
import axios from "axios";
import { postAdd, deleteItem, getPageData } from "@/api/api";
import BaseDialog from "@/components/baseDialog.vue";
// import('@/components/baseDialog.vue')
export default {
  components: {
    BaseDialog
  },
  data() {
    return {
      currentPage: 1,
      size: 5,
      page: 0,
      total: 0,
      list: [],
      outerVisible: false,
      innerVisible: false
    };
  },
  mounted() {
    this.getPage({});
  },
  methods: {
    outerClose() {
      this.outerVisible = false;
    },
    outerSure() {
      this.innerVisible = true;
    },
    innerClose() {
      this.innerVisible = false;
    },
    async innerSure(formData) {
      console.log(formData, "formData");
      let data = await postAdd(formData);
      console.log(data, "data");
      this.innerVisible = false;
      this.outerVisible = false;
    },
    async addItem() {
      this.outerVisible = true;
      // let data = await postAdd({
      //   username: 'hhh',
      //   password: '123',
      //   nickname: 'hhh'
      // })
      // console.log(data, 'data----data')
    },
    async removeItem(index, row) {
      let data = await axios.deleteItem({ id: row.id });
      this.getPage({ page: this.currentPage - 1 });
    },
    async getPage({ page = this.page, size = this.size }) {
      // let data = await axios.get('http://localhost:3000/users/page',{
      //   params: {page,size}
      // })
      let data = await getPageData({ page, size });
      console.log(data, "-分页data----");
      let list = data.data;
      this.total = data.total;
      this.list = list;
      console.log(data, "data");
    },
    handleSizeChange(size) {
      this.size = size;
      this.getPage({ page: this.currentPage - 1 });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPage({ page: val - 1 });
    }
  }
};
</script>
<style lang="scss">
</style>